<template>
    <div class="control-bar">
        <slot />

        <div class="tail-wrapper">
            <div>
                <slot name="tail" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts"></script>
<style lang="scss">
@use '/src/assets/scss/color.scss' as colors;
@use '/src/assets/scss/size.scss' as sizes;
.control-bar {
    height: sizes.$controlBarHeight;
    background: lighten(#000, 20);
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    gap: 10px;

    .tail-wrapper{

        display: flex;
        flex-grow: 1;
        flex-direction: row;
        justify-content: flex-end;
    }
}
</style>
